<extend name="base" />

<block name="panel">

    <div class="mask" id="mask">
    </div>

    <div>
      <input type="hidden" value="{$folder_id}" id="folder_id">
    </div>
    
    <div class="origin" id="origin">
      <img id="origin-image" src="" height= "400" />
    </div>
    
    <div class="board">

      
      <p>上传图片：</p>
      <div>
      <form action="http://128.199.209.239/IM/index.php/Home/Photo/uploadPhoto" enctype="multipart/form-data" method="post" >

      <input type="file" name="photo" style="width:240px; float:left" class="btn btn-default"/>
      <input  value="{$folder_id}" id="folder_id" name="folder_id" type="hidden">
      <input type="submit" class="btn btn-default" style="width:60px; float:clear;" value="提交" > 
      </form>
      </div>

      <br/>

      <div>
        <p>封面：</p>
        <img src="http://128.199.209.239/IM/Public/Thumb/{$cover}" id="{$cover}">
      </div>

      <div style="padding-top: 40px;" id="album">
      <table id="photo_album" class="table">

      </table>
      </div>  

    </div>




  <script type="text/javascript">
  $(document).ready(function(){
    
    var photoList;

    var folder_id = $("#folder_id").val();
    // get photo list:
    $.ajax({
      type:'POST', 
      url:'http://128.199.209.239/IM/index.php/Home/Photo/getList',
      dataType:'json',
      data:{
        folder_id: folder_id,
      },
      success:function(data){
        console.log(data);
        photoList= data;
        showImage();
      }
    });

    // show photo album
    function showImage(){
      var wd_height = $(window).height();
      var wd_width = $(window).width();
      var col = Math.floor((wd_width-150)/200);
      var row = Math.floor(photoList['length']/col)+1;
      console.log("width: "+ wd_width +"; col: "+col);

      for(var i=0; i<row; i++){
        var str = "<tr>";
        for(var j=0; j<col; j++){
          var index = i*col+j;
          if(index < photoList['length']){
            str = str+"<td><img src = 'http://128.199.209.239/IM/Public/Thumb/" + photoList[index]['photo_name']+"'"+ "id="+ 
                  photoList[index]['photo_name'] + " class='photo' />" + "<img src = 'http://128.199.209.239/IM/Public/delete.png'"
                   + "height=40px" +" id="+ photoList[index]['photo_id'] +" class='delete' />" + "<button class='setCover btn btn-default' id="
                   + photoList[index]['photo_id']  +">设为封面</button>" + "</td>";
          }else{
            str+= "<td></td>";
          }
        }
        str+= "</tr>";
        $("#photo_album").append(str);
      }
    }

//
    // display original image on click
     $("div#album").delegate(".photo","click", function(){
      img = $(this).attr('id');
      var img_url = "http://128.199.209.239/IM/Public/Photo/"+img;
      $("#origin-image").attr("src", img_url);
      $("div#mask").show();
      $("div#origin").show();
      var height = $("img#origin-image").height();
      var width = $("img#origin-image").width();
      $("div#origin").css('height', height);
      $("div#origin").css('width', width);
      $("div#origin").css('margin-top', -height/2);
      $("div#origin").css('margin-left', -width/2);


      console.log(img);
     });

     $("div#album").delegate("img.delete","click", function(){
      id = $(this).attr('id');
      var ret = confirm("确认删除");
      if(ret){
        $.ajax({
          type:'POST', 
          url:'http://128.199.209.239/IM/index.php/Home/Photo/delete',
          dataType:'json',
          data:{photo_id: id},
          success:function(data){
            console.log(data);
            location.reload();
          } 
        });        
      }

     });

     $("div#album").delegate("button.setCover","click", function(){
      photo_id = $(this).attr('id');
      folder_id = $("#folder_id").val();
      var ret = confirm("确认设置为封面");
      if(ret){
        $.ajax({
          type:'POST', 
          url:'http://128.199.209.239/IM/index.php/Home/Photo/setCover',
          dataType:'json',
          data:{photo_id: photo_id, folder_id:folder_id},
          success:function(data){
            console.log(data);
            location.reload();
          } 
        });        
      }

     });

     // hide mask on click
     $("div#mask").click(function(){
      $(this).hide();
      $("#origin").hide();
     });

  });

  </script>


  <style type="text/css">
  div.board{
    padding-left: 100px;
    padding-right: 100px;
    width: 100%;
    z-index: 0;
  }
  table#photo_album{
    width: 100%;
  }

  div.mask{
    display: none;
    position: fixed;
    top:0px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    filter:alpha(opacity=60); /*IE滤镜，透明度50%*/
    -moz-opacity:0.6; /*Firefox私有，透明度50%*/
    opacity:0.6;/*其他，透明度50%*/
    z-index: 100;
  }

  div.origin{
    position: absolute;
    left: 50%;
    top: 50%;
    display: none;
    z-index: 200;
  }

  </style>

</block>